<template>
	<view>

		<view class="ygzl">
			<view class="ygzl-content">

				<view class="ygzl-content-item" v-for="(item,index) in typeList" :key="index"
					:class="[num==item.num?'select':'']"
					@click="changeWeight(item.num,item.cate_type,item.name,item.img)">
					<image :src="item.img" mode="aspectFit" :style="{background:item.img}"></image>
					<text>{{item.name}}</text>
				</view>

			</view>
		</view>  

		<view class="type-selete">
			<view class="service">
				<view class="item" v-for="( item, index ) in categoryData" :key="index" @tap="toPage(item)">
					<view class="flex">
						<view class="icon-wrap">
							<view>{{ item.text }}</view>
						</view>
						<view class="flex">
							<text
								style="font-size: 28rpx;margin-right: 10rpx;color: #9b9ea5;">{{item.parameter}}</text><i
								class="icon xiangyou"></i>
						</view>
					</view>
					<view class="button" v-if="item.btn">
						<button type="button" v-for="(itemx,indexx) in item.children"
							@tap.stop="btn(item,itemx,index,id)" :key="indexx">{{itemx.name}}</button>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-btn" v-if="btnShow" @tap="toPrice()">
			<view class="btn-name">立即获取估价</view>
			<view class="btn-tips">价格合适在回收</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				pname: '空调',
				img: this.commonImg() + "/electrical-2.png",
				cate_type: 3,
				categoryData: [

				],
				evaluateData: [],
				second_cate_id: null,
				answer_ids: '',
				btnShow: false,
				price: null,
				dataList: {},
				typeList: [{
						name: '空调',
						img: this.commonImg() + "/electrical-2.png",
						cate_type: 3,
						num: 1
					}, {
						name: '冰箱',
						img: this.commonImg() + "/electrical-3.png",
						cate_type: 1,
						num: 2
					}, {
						name: '洗衣机',
						img: this.commonImg() + "/electrical-1.png",
						cate_type: 1,
						num: 3
					}, {
						name: '电视机',
						img: this.commonImg() + "/electrical-5.png",
						cate_type: 1,
						num: 4
					},
					{
						name: '电脑',
						img: this.commonImg() + "/electrical-4.png",
						cate_type: 1,
						num: 5
					},
				],

			};
		},
		onLoad(option) {

		
			this.categoryList(this.num, this.cate_type)
		},
		methods: {

			categoryList(num, cate_type) {
				console.log(num)
				const that = this
				this.$api.http.post('category-list', {
					cate_type: cate_type,
					price_type: 2
				}).then(res => {
					if (res) {

						switch (this.num) {
							case 1:
								that.categoryData = res.data.list
								that.categoryData[0].text = '1.规格'
								break;
							case 2:

								res.data.list.forEach((item, index) => {
									if (item.name.includes('大家电')) {
										item.children.forEach((itemx, indexx) => {
											if (itemx.name === '冰箱') {
												that.second_cate_id = itemx.id
												console.log(that.second_cate_id)
												this.$api.http.post(
													'get-category-evaluate-label', {
														second_cate_id: that.second_cate_id
													}).then(resen => {
													if (resen) {
														that.evaluateData = resen.data.list
														that.categoryData.push({
															text: '1.' + that
																.evaluateData[0]
																.name,
															children: that
																.evaluateData[0]
																.items,
														})

													}
												})

											}
										})
									}
								})

								break;
							case 3:
								res.data.list.forEach((item, index) => {
									if (item.name.includes('家电')) {
										item.children.forEach((itemx, indexx) => {
											if (itemx.name === '洗衣机') {
												that.second_cate_id = itemx.id
												this.$api.http.post(
													'get-category-evaluate-label', {
														second_cate_id: that.second_cate_id
													}).then(resen => {
													if (resen) {
														that.evaluateData = resen.data.list
														that.categoryData.push({
															text: '1.' + that
																.evaluateData[0]
																.name,
															children: that
																.evaluateData[0]
																.items,
														})

													}
												})

											}
										})
									}
								})

								break;
							case 4:
								res.data.list.forEach((item, index) => {
									if (item.name.includes('家电')) {
										item.children.forEach((itemx, indexx) => {
											if (itemx.name === '电视') {
												that.second_cate_id = itemx.id
												this.$api.http.post(
													'get-category-evaluate-label', {
														second_cate_id: that.second_cate_id
													}).then(resen => {
													if (resen) {
														that.evaluateData = resen.data.list
														that.categoryData.push({
															text: '1.' + that
																.evaluateData[0]
																.name,
															children: that
																.evaluateData[0]
																.items,
														})

													}
												})

											}
										})
									}
								})
								break;
							case 5:

								res.data.list.forEach((item, index) => {
									if (item.name.includes('办公家电')) {
										that.categoryData.push({
											text: '1.规格',
											children: item.children,
										})

									}
								})
								break;
						}
					}

				})
			},

			evaluateLabel(data, index) {
				let indexNum = index
				const that = this

				if (index === 0) {
					that.categoryData = that.categoryData.slice(0, 1);
					that.btnShow = false
					if (that.num === 1 || that.num === 5) {
						that.second_cate_id = data.id
						that.$api.http.post('get-category-evaluate-label', {
							second_cate_id: data.id
						}).then(res => {
							if (res) {
								if (res.data.list) {
									that.evaluateData = res.data.list
								}
							
								that.evaluateData.forEach((item, index) => {
									if (indexNum === index) {
										that.categoryData.push({
											text: index + 1 + 1 + '.' + item.name,
											children: item.items
										})
									}
								})

							}
						})

					} else {
						that.evaluateData.forEach((item, index) => {
							if (indexNum + 1 === index) {
								that.categoryData.push({
									text: index + 1 + '.' + item.name,
									children: item.items
								})
							}
						})
					}


				} else {
					that.categoryData = that.categoryData.slice(0, indexNum + 1);
					if (that.num === 1 || that.num === 5) {

						that.evaluateData.forEach((item, index) => {
							if (indexNum === index) {
								that.categoryData.push({
									text: index + 1 + 1 + '.' + item.name,
									children: item.items
								})
							}
						})
					} else {
						that.evaluateData.forEach((item, index) => {
							if (indexNum + 1 === index) {
								that.categoryData.push({
									text: index + 1 + '.' + item.name,
									children: item.items
								})
							}
						})
					}
					that.categoryData.forEach((itemx, indexx) => {
						console.log(itemx)
						if (!itemx.parameter) {
							that.btnShow = false
						} else {
							that.btnShow = true
						}
					})
				}
			},



			toPage(item) {
				item.btn = true
				this.$forceUpdate()
				console.log(item)
			},
			btn(item, itemx, index, id) {
				console.log(item, itemx)
				item.parameter = itemx.name
				item.id = itemx.id
				item.btn = false
				this.evaluateLabel(itemx, index)
				this.$forceUpdate()

			},

			changeWeight(e, cate_type, pname, img) {
				this.categoryData = []
				this.num = e;
				this.pname = pname
				this.img = img
				this.cate_type = cate_type
				this.btnShow = false
				this.categoryList(this.num, this.cate_type)
			},
			toPrice() {
				const that = this
				let answer_ids = []
				if (that.num === 1 || that.num === 5) {
					that.categoryData.forEach((item, index) => {

						if (index > 0) {
							answer_ids.push(item.id)
							console.log(that.answer_ids)
						}
					})
					that.answer_ids = answer_ids.join(',');
				} else {
					that.categoryData.forEach((item, index) => {
						answer_ids.push(item.id)
						console.log(that.answer_ids)
					})
					that.answer_ids = answer_ids.join(',');
				}

				this.$api.http.post('do-category-evaluate', {
					second_cate_id: this.second_cate_id,
					answer_ids: that.answer_ids
				}).then(res => {
					if (res) {
						that.price = res.data.list.price
						let data = this.dataList
						let whole_cate_name = []
						that.categoryData.forEach((item, index) => {
							whole_cate_name.push({
								key: item.text,
								values: [item.parameter]
							})
							console.log(that.answer_ids)
						})


						data.good_type = this.cate_type;
						data.cate_type = this.cate_type;
						data.price_type = 2;
						data.pname = this.pname
						data.img = this.img
						data.price = that.price
						data.order_json = [{
							second_cate_id: this.second_cate_id,
							num: 1,
							total_amount: that.price,
							whole_cate_name: whole_cate_name
						}, ]
						

						
						uni.navigateTo({
							url: `/packagePages/tabBar/appliances/result?data=` + encodeURIComponent(JSON
								.stringify(data))
						})
					}
				})
			},

		},
	}
</script>

<style lang="scss">
	page {
		background: #f3f4f6;
	}



	.ygzl {

		border-radius: 10px;
		box-sizing: border-box;
		padding: 20rpx 0;

	}

	.ygzl-content {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 20rpx 0;
	}

	.ygzl-content-item {
		padding: 15rpx;

		background: #fff;
		text-align: center;
		border-radius: 10rpx;
		margin: 0 10rpx;

		text {
			display: block;
			font-size: 26rpx;
			line-height: 50rpx;
			margin-top: 35rpx;
		}


		image {
			width: 80rpx;
			height: 80rpx;
			display: block;
			margin: 12rpx auto 0;
			padding: 10rpx;
			-webkit-box-reflect: below -26rpx -webkit-linear-gradient(transparent, transparent 40%, rgba(255, 255, 255, 0.6));
		}
	}

	.ygzl-content-item.select {
		background: linear-gradient(135deg, #ff2d49, #ff482d);
		position: relative;

		&::after {
			position: absolute;
			left: 0;
			right: 0;
			bottom: -76rpx;
			content: '';
			border: 14rpx solid transparent;
			border-left-color: #ff2d49;
			transform: rotate(90deg);
		}

		text {
			color: #fff;
		}

	}

	.ygzl-mark {
		margin-top: 30upx;
		display: flex;
		color: #222222;
		font-size: 26upx;
		height: 80upx;
		line-height: 80upx;
		justify-content: space-between;
	}

	.ygzl-mark-btn {
		border-radius: 10upx;
		background: #31b977;
		color: #FFFFFF;
		text-align: center;
		width: 180upx;
	}

	.ygzl-file {
		margin-top: 30upx;
	}

	.type-selete {
		padding-bottom: 200rpx;
	}

	.service {
		text-align: left;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;

		.item {
			width: 100%;
			text-align: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #e8eaeb;

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			button {
				background: #fff;
				margin: 20rpx 0;
				font-weight: bold;
				color: #676767;
			}

			.icon-wrap {
				position: relative;
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}

				view {
					font-size: 26rpx;
				}

			}

			i {
				font-size: 26rpx;
				color: #b5b8c1;
			}
		}

	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		height: 140rpx;
		color: #fff;
		left: 0;
		right: 0;
		background: #ff2d49;
		text-align: center;

		.btn-name {
			margin-top: 26rpx;
			font-size: 30rpx;
			margin-bottom: 8rpx;
		}

		.btn-tips {
			font-size: 20rpx;
		}
	}
</style>